<template>
  <div class="content">
    <div class="list">
      <div class="left" style="padding-top: 20px;">
        <label>车位名称:</label>
        <el-input
          v-model="car_p"
          placeholder="车位名称"
          style="width: 300px;margin: 0;margin-bottom:20px;margin-top: 4px;"
        ></el-input>
        <label>车位金额:</label>
        <el-input
          v-model="car_o"
          placeholder="车位金额"
          style="width: 300px;margin-bottom:20px;margin-top: 4px;"
        ></el-input>
        <label>车位类型:</label>
        <el-select
          v-model="value"
          clearable
          placeholder="请选择查询类型"
          style="width: 300px;margin-bottom:20px;margin-top: 4px;"
        >
          <el-option
            v-for="item in valueList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <label>车位状态:</label>
        <el-select
          v-model="value1"
          clearable
          placeholder="请选择查询类型"
          style="width: 300px;margin-bottom:20px;margin-top: 4px;"
        >
          <el-option
            v-for="item in valueList1"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div
          style="border-top:1px solid rgba(128, 128, 128, 0.384);width: 300px;padding-top:30px;margin-top: 10px;vertical-align: middle;"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
            style="margin-left: 20px;width: 100px;"
            class="button1"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="reset"
            style="margin-left: 20px;width: 100px;"
            class="button3"
            >重置</el-button
          >
        </div>
      </div>
      <div class="right">
        <div
          class="title"
          style="display: flex;justify-content: space-between;align-items: center;"
        >
          <h1 style="margin-bottom: 10px;">车位列表</h1>
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="add()"
            class="button2"
            style="padding: 6px 6px;width: 80px;"
            >新增</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          stripe
          align="center"
          tooltip-effect="dark"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#1f2d3d',
            'border-color': '#dfe6ec',
          }"
          style="width: 100%;font-size: 14px;color: #1f2d3d"
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" align="center" width="100">
          </el-table-column>
          <el-table-column
            sortable
            prop="parkname"
            label="车位名称"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="parkpay"
            label="车位金额"
            align="center"
            width="200"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column label="车位类型" width="200" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parktype"
                :active-value="1"
                :inactive-value="2"
                active-text="地下"
                inactive-text="地上"
                @change="(val) => handleSwitchChange(val, scope.row,0)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="车位状态" width="200" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parkstatus"
                :active-value="1"
                :inactive-value="2"
                active-text="已有车"
                inactive-text="未有车"
                @change="(val) => handleSwitchChange(val, scope.row,1)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="206" align="center">
            <template slot-scope="scope">
              <div style="display: flex;margin-left: 13px">
                <el-button
                  :plain="true"
                  size="mini"
                  :disabled="!isGroundMode(scope.row.parkstatus)"
                  style="background-color: #fff;font-size: 12px"
                  @click="send(scope.row, scope.$index)"
                  >分配车位</el-button
                >
                <el-button
                  :plain="true"
                  size="mini"
                  style="background-color: #fff;font-size: 12px"
                  @click="edit(scope.row, scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  :plain="true"
                  size="mini"
                  style="color: #62a8ea;background-color: #fff;font-size: 12px"
                  @click="deleteData(scope.row)"
                  >移除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next, jumper"
            :page-size="pageSize"
            :current-page="cur_page"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            background
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
      <add-dialog ref="addDialog"></add-dialog>
    </div>
    <update-car ref="updateCar"></update-car>
  </div>
</template>

<script>
import addDialog from "./addDialog";
import UpdateCar from './updateCar.vue';
export default {
  name: "userIndex",
  components: {
    addDialog,
    UpdateCar,
  },
  data() {
    return {
      car_p: "",
      car_o: "",
      dialogTableVisible: false,
      value: null,
      value1: null,
      valueList: [
        {
          text: "地下",
          value: 1,
        },
        {
          text: "地上",
          value: 2,
        },
      ],
      valueList1: [
        {
          text: "未有车",
          value: 1,
        },
        {
          text: "已有车",
          value: 2,
        },
      ],
      tableData: [],
      loading: false,
      loaded: false,
      total: 0,
      cur_page: 1,
      pageSize: 10,
      pageNo: 1,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      this.search();
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      this.search();
    },
    // 获取用户表信息
    getData() {
      this.loading = true;
      this.$Axios({
        url: "/parking/getParkData",
        method: "get",
        data: {
          type: 2,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    send(row, index) {
      this.$nextTick(() => {
        this.$refs.updateCar.dialogTableVisible = true;
        this.$refs.updateCar.init(row);
        this.$refs.updateCar.selectedRow = null;
      });
    },
    add() {
      this.$nextTick(() => {
        this.$refs.addDialog.actionType = "add";
        this.$refs.addDialog.dialogTableVisible = true;
        this.$refs.addDialog.formData = Object.assign({});
      });
    },
    // 查询
    search() {
      this.loading = true;
      this.$axiosToken({
        url: "/parking/getParkData",
        method: "get",
        data: {
          parkname: this.car_p,
          parkpay: this.car_o,
          parktype: this.value,
          parkstatus: this.value1,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 新增
    xlsx() {
      this.$Axios({
        url: "http://property.admin.byesame.com/js/chunk-3abc2d8e.982332b4.js",
        method: "get",
        data: {},
        success: (result) => {
          console.log("----yes");
        },
      });
    },
    // 重置
    reset() {
      this.getData();
      this.value = null;
      this.value1 = null;
      this.car_o = "";
      this.car_p = "";
    },
    // 编辑
    edit(row, index) {
      // this.$nextTick(() => {
      //     this.$refs.addDialog.dialogTableVisible = true;
      //     this.$refs.addDialog.actionType = "edit";
      //     console.log(row,'行')
      //     this.$refs.addDialog.formData = Object.assign({},row)
      // });
      this.$refs.addDialog.actionType = "edit";
      this.$refs.addDialog.dialogTableVisible = true;
      this.$refs.addDialog.init(row);
    },
    async handleSwitchChange(newVal, rowData,id) {
      try {
        // 保留原始值用于回滚
        if(id){
            // var originalValue = rowData.parkstatus;
            rowData.parkstatus = newVal;
        }else{
            // var originalValue = rowData.parktype;
            rowData.parktype = newVal;
        }
        

        

        // 构造提交数据
        const submitData = {
          u_id: rowData.id,
          parkname: rowData.parkname,
          parkpay: rowData.parkpay,
          parktype: rowData.parktype,
          parkstatus: rowData.parkstatus,
        };

        // 提交修改
        const res = await this.$axiosToken({
          url: "/parking/editParkData",
          method: "post",
          data: submitData,
        });

        // 提交成功后刷新数据
        this.$message.success("修改成功");
        this.$parent.getData();
      } catch (err) {
        // 失败时回滚状态
        // const originalValue = 1;
        rowData.parktype = originalValue;
        this.$message.error(`修改失败: ${err.message}`);
      }
    },
    isGroundMode(s){
      return s === 2
    },
    // 删除
    deleteData(row, index) {
      this.$confirm("确定删除该用户？", "提示", {
        type: "warning",
      }).then(() => {
        const id = row.id;
        this.$axiosToken({
          url: "/parking/delParkData",
          method: "get",
          data: { id },
          success: (result) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除用户成功",
              type: "warning",
            });
          },
        }).catch((reason) => {
          alert("删除失败" + reason);
        });
      });
    },

    parktype(row, column) {
      const parktype = row.parktype;
      if (parktype == 1) {
        return "地上";
      } else {
        return "地下";
      }
    },
    parkstatus(row, column) {
      const parkstatus = row.parkstatus;
      if (parkstatus == 1) {
        return "已有车";
      } else {
        return "未有车";
      }
    },

    starttime(row, column) {
      const date1 = row.startdate;
      return date1.replace("T", " ").replace(".000Z", "");
    },
    endtime(row, column, cellValue) {
      const date = cellValue;
      return date.replace("T", " ").replace(".000Z", "");
    },
  },
};
</script>

<style scoped>
::v-deep .el-input__inner {
  font-size: 14px;
  height: 36px;
}
.el-input:nth-child(1) {
  width: 30%;
  border-radius: 4px;
}
.el-input:nth-child(2) {
  width: 30%;
  margin-left: 10px;
  border-radius: 4px;
}
.el-input:nth-child(3) {
  width: 22%;
  margin-left: 10px;
  border-radius: 4px;
}
.button1,
.button2,
.button3 {
  border-radius: 4px;
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  width: 9%;
}
::v-deep .el-button--mini,
.el-button--mini.is-round {
  padding: 6px 10px;
}
::v-deep .el-button--mini,
.el-button--small {
  border-radius: 5px;
}

.list {
  margin-top: 25px;
}
.pagination {
  text-align: right;
  margin: 20px 0;
}
::v-deep .el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}
.list {
  display: flex;
  justify-content: space-between;
}
.left {
  display: flex;
  flex-direction: column;
}
label {
  font-size: 14px;
  color: #606266;
}
</style>
